<template>
	<view class="mainPage content" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box" v-if="banklist.length">
			<view class="account" v-for="(item,index) in banklist" :key="index" @click="choice(index,item.bank_num,item.id,item.name)">
				<view class="boxs">
					<view class="img">
						<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/bank.png">
						</image>
					</view>
					<view class="title">
						<view class="bank">{{item.bank_name}}</view>
						<view class="name">持卡人：{{item.name}}</view>
					</view>
					<view class="imgs" @click.stop="deletes(index,item.id)">
						<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/shanchu99.png">
						</image>
					</view>
				</view>
				<view class="box2">
					{{item.bank_num}}
				</view>
			</view>
			<view class="but" @click="addbank">
				<button>+添加银行卡</button>
			</view>
		</view>
		<view class="null" v-else>
			<u-empty text="暂无提现账户" mode="favor"></u-empty>
			<view class="buts" @click="addbank">
				<button>+添加银行卡</button>
			</view>
		</view>
		<!-- 删除提示框 -->
		<u-modal v-model="show" :content="content" @confirm="confirm" :show-cancel-button="true"></u-modal>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "提现账户",
			a: '',
			banklist: '',
			show: false,
			content: '真的要删除此银行卡吗？',
			index: '',
			id: ''
		}
	},
	onLoad() {
		that = this
	},
	onShow() {
		that.bank()
	},
	methods: {
		bank() {
			that.$postAjax1('PetDoctor_Center_bankCardinfo', {
			}, function (data) {
				that.banklist = data.data.data
				console.log('银行卡列表', that.banklist)
			})
		},
		confirm() {
			that.$postAjax1('PetDoctor_Center_delbankCard', {
				id: that.id
			}, function (data) {
				console.log('删除成功')
				that.bank()
			})
			// console.log('item',index)
		},
		cancel() {
			that.show = false
		},
		//删除银行卡
		deletes(index, id) {
			that.index = index
			that.id = id
			that.show = true
		},
		addbank() {
			uni.navigateTo({
				url: "./addbank"
			})
		},
		choice(index, num, id, name) {
			var index = index;  //item为要传的值
			var num = num;
			var id = id;
			var name = name;
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			prevPage.num = num;
			prevPage.id = id;
			prevPage.name = name;
			uni.navigateBack();
		}
	}
}
</script>
<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	.box {
		padding: 50rpx 30rpx;
		.account {
			background: #fe8821;
			border-radius: 16rpx;
			padding: 30rpx;
			color: #ffffff;
			margin-bottom: 30rpx;
			.boxs {
				position: relative;
				.img {
					display: inline-block;
					width: 20%;
					image {
						width: 62rpx;
						height: 62rpx;
					}
				}
				.title {
					display: inline-block;
					width: 70%;
					.bank {
						font-size: 36rpx;
						line-height: 50rpx;
					}
					.name {
						font-size: 28rpx;
						line-height: 50rpx;
					}
				}
				.imgs {
					display: inline-block;
					width: 10%;
					position: absolute;
					top: 0;
					image {
						width: 30rpx;
						height: 32rpx;
					}
				}
			}
			.box2 {
				padding: 20rpx 50rpx;
				font-size: 48rpx;
			}
		}
		.but {
			width: 100%;
			// position: absolute;
			// bottom: 200rpx;
			margin: 100rpx 0;
			button {
				width: 95%;
				background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
				border-radius: 8rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
	.null {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #f6f6f6;
		.buts {
			position: absolute;
			bottom: 0;
			width: 100%;
			// position: absolute;
			// bottom: 200rpx;
			margin-bottom: 200rpx;
			button {
				width: 90%;
				background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
				border-radius: 8rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}
	}
}
</style>
